<template>
  <el-card>
    <div class="components-container">
      <aside><h1>新建无流程表单</h1></aside>
      <div>
        <h3>表单标题:</h3>
        <el-input
          v-model="saveFormData.title"
          placeholder="请输入表单标题"
          style="margin-bottom: 15px"
        ></el-input>
        <tinymce v-model="content" :height="300" />
      </div>
      <br><br><br>
      <hr>
      <div><h1>生成无流程底表效果:</h1></div>
      <div class="editor-content" v-html="content" />
    </div>

    <el-button class="browserButton" @click="sendForm">提交</el-button>
  </el-card>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import { saveUnform } from "@/api/unForm";
import { getTokenManager } from "@/api/managers";
import { getToken } from "@/utils/auth";

export default {
  name: "TinymceDemo",
  components: { Tinymce },
  data() {
    return {
      content: null,
      saveFormData: {
        id: null,
        title: "",
        body: "",
        creditId: null,
        status: 1,
      },
      creditId: null
    };
  },
  created(){
    this.getCreditId();
  },
  methods: {
     sendForm() {
      console.log(this.saveFormData);
      this.saveFormData.body = this.content
      this.saveFormData.creditId = this.creditId
      if (this.saveFormData.title === '') {
        this.$message.warning("请写表单标题!")
        return
      }
      saveUnform(this.saveFormData).then((res) => {
        this.$message.success("发送流程表单成功!")
        this.saveFormData = this.$options.data().saveFormData
      })
      .catch(res => {
        console.log(res);
        this.$message.error("发送表单失败，请检查日志")
      });
    },
    postUnform() {
      console.log(this.content);
    },
     getCreditId() {
      getTokenManager(getToken()).then((res) => {
        this.creditId = res.data.userInfo.id;
      });
    },
  }
};
</script>

<style scoped>
.editor-content {
  margin-top: 20px;
}
.components-container {
  margin: 10px;
}
</style>

